<!-- page content -->
<div class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>Vue <small>index</small></h3>
            </div>
        </div>

        <div class="clearfix"></div>

        <div class="row">
            <div id="vueTest" class="col-md-12 col-sm-12">
                <p>===========================================</p>
                <h3>取值</h3>
                <h3>{{title}}</h3>
                <p>Hello {{user.userName}}</p>
                <p>===========================================</p>
                <h3>单向绑定</h3>
                <p>UserName: <input type="text" v-bind:value="user.userName" /></p>
                <p>Password: <input type="text" :value="user.password" /></p>
                <p>===========================================</p>
                <h3>双向绑定</h3>
                <input type="hidden" v-model:value="user.id" />
                <p>UserName: <input type="text" v-model:value="user.userName" /></p>
                <p>Password: <input type="text" v-model:value="user.password" /></p>
                <p>Email: <input type="text" v-model:value="user.email" /></p>
                <p>UserImage: <input type="text" v-model:value="user.userImage" /></p>
                <p>===========================================</p>
                <h3>事件绑定</h3>
                <p><input type="button" @click="test1()" value="按钮1" /></p>
                <p><input type="button" @click="test2($event)" value="按钮2" myName="hujiang" /></p>
                <p>===========================================</p>
                <h3>v-for循环</h3>
                <p>
                <ul>
                        <span v-for="(role, index) in roles">
                            <li>{{role.roleName}}</li>
                        </span>
                </ul>
                </p>
                <p>
                    <span v-for="(role, index) in roles">
                        <input type="checkbox" :value="role.id" />{{role.roleName}}
                    </span>
                </p>
                <p>
                <table>
                    <thead>
                    <tr>
                        <td>ID</td>
                        <td>Name</td>
                    </tr>
                    </thead>
                    <tbody v-for="(role, index) in roles">
                    <tr>
                        <td>{{role.id}}</td>
                        <td>{{role.roleName}}</td>
                    </tr>
                    </tbody>
                </table>
                </p>
                <p>===========================================</p>
                <h3>自定义组件</h3>
                <p>简单组件：<simple-button></simple-button></p>
                <p>复杂组件：<count-button></count-button></p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    // 自定义简单组件
    Vue.component("simple-button", {
        template: "<button>hujiang</button>",
    });

    // 自定义复杂组件
    Vue.component("count-button", {
        data: function () {
            return {count: 0};
        },
        methods: {
            countFun: function() {
                this.count += 1;
            }
        },
        template: "<button @click='countFun()'>{{count}}</button>",
    });

    var vueTest = new Vue({
        el: "#vueTest",
        data: {
            title: "Vue index Page",
            user: {
                id: 1,
                userName: "Hujiang",
                password: "111111",
                email: "hujiang@163.com",
                userImage: "/upload/iii.png",
            },
            roles: [
                { id: 1, roleName: "admin" },
                { id: 2, roleName: "manager" },
                { id: 3, roleName: "staff" },
            ],
        },
        methods: {
            test1: function () {
                console.log(this.user);
                console.log("This is test1 function.");
            },
            test2: function (event) {
                console.log(event);
                console.log(event.currentTarget.attributes.getNamedItem("myName"));
                console.log(event.currentTarget.attributes.getNamedItem("myName").name);
                console.log(event.currentTarget.attributes.getNamedItem("myName").value);
            },
            initUser: function () {
                var self = this;
                $.ajax({
                    url: "/api/user/" + this.user.id,
                    type: "get",
                    success: function (data) {
                        self.user = data;
                    },
                    error: function (data) {
                        layer.msg(data.responseText, { icon: 0 });
                    },
                });
            },
        },
        created: function () {
            window.initUser = this.initUser;
        },
        mounted: function () {
            this.initUser();
        },
    });
</script>